<template>
  <div id="app">
    <input type="text" v-model="value" @keydown.enter="addCarShop"/>
    
    <ListItem :list="list1" title="正在进行" @qwe="deleteCarShop"/>
    <ListItem :list="list2" title="已经完成" @qwe="deleteCarShop"/>   

  </div>
</template>


<script>
const { carShop } = require("./mock/index");
import ListItem from './components/ListItem.vue'
export default {
  data() {
    return {
      carShop,
      value: '',
    };
  },
  computed: {
    // 完成数据
    list1() {
      return this.carShop.filter(item => item.isChecked);
    },
    // 进行数据
    list2() {
      return this.carShop.filter(item => !item.isChecked);
    }
  },
  methods: {
    // 删除
    deleteCarShop(id) {
      // 过滤id
      this.carShop = this.carShop.filter(item => item.id !== id)
    },
    // 添加
    addCarShop() {
      // 推入数据
      this.carShop.push({
        id: Math.random().toString().slice(2),
        title: this.value,
        isChecked: false
      })
      this.value = ''
    }
  },
  components: {
    ListItem
  }
};
</script>